var btnLast = document.getElementsByClassName("nav-last")[0];
var btnNext = document.getElementsByClassName("nav-next")[0];
var lists = document.getElementsByClassName("picture-list");

for(var i = 0; i < lists.length; i++) {
	// 给图片添加点击放大事件
	lists[i].getElementsByTagName("img")[0].onclick = function () {
		imgFangda(this);
	}
}

btnLast.onclick = function () {
	var navUl = document.getElementsByClassName("js-ul")[0];
	var top = parseInt(navUl.style.top);
	if(top >= 0) return;
	top += 46;
	navUl.style.top = top + "px";
}

btnNext.onclick = function () {
	var navWidth = document.getElementsByClassName("js-ul")[0].offsetHeight;
	var navUl = document.getElementsByClassName("js-ul")[0];
	var top = parseInt(navUl.style.top);
	var bottom = navWidth-266;
	if(top <= -bottom) return;
	top -= 46;
	navUl.style.top = top + "px";
}

// 图片放大事件
function imgFangda(img) {
	var container = document.getElementsByClassName("container")[0];
	// 获取图片的路径
	var imgSrc = img.getAttribute("src");

	var div = document.createElement("div");
	div.setAttribute("class", "js-picture");

	var img = document.createElement("img");
	img.setAttribute("src", imgSrc);

    // 添加元素
	container.appendChild(div);
	div.appendChild(img);

	// 可视区域的高度和宽度(浏览器页面的高度和宽度)
	var clientHeight = document.documentElement.clientHeight;
	var clientWidth = document.documentElement.clientWidth;
	// 设置图片放大后在页面居中
	img.style.top = (clientHeight - img.offsetHeight) / 2 + "px";
	img.style.left = (clientWidth - img.offsetWidth) / 2 + "px";
	// 添加取消放大事件
	div.onclick = function () {
		console.log(this);
		container.removeChild(this);
	}
}

// ajax生成内容
function listsChange(){
	var lists = document.getElementsByClassName("nav-list");
	for(var i = 0; i < lists.length; i++) {
		lists[i].onclick = function () {
			var txt1 = this.getElementsByTagName("a")[0].innerHTML;
			ajaxWeb(txt1);
		}
	}
}
ajaxWeb("第一组");
function ajaxWeb(txt1) {
	var xmlhttp;
	var zm = document.getElementById("js_bt");
	var pictures = document.getElementsByClassName("js_picture");
	var jianjie = document.getElementById("jianjie");
	var url = document.getElementById("url");
	var img = "images/";
	var url1 = "http://localhost/web/";

	if (window.XMLHttpRequest) {
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET","js/zuopin.json");
	xmlhttp.send();
	xmlhttp.onload=function () {
		if(xmlhttp.readyState==4 && xmlhttp.status==200) {
			var txt = xmlhttp.responseText;
			txt = JSON.parse(txt);
			console.log(txt);
			for(var i in txt) {
				console.log(txt[i]);
				zm.innerHTML = "组名：" + txt[i][0].zm;
				pictures[0].setAttribute("src", img + txt[i][0].src1);
				pictures[1].setAttribute("src", img + txt[i][0].src2);
				pictures[2].setAttribute("src", img + txt[i][0].src3);
				jianjie.innerText = "简介：" + txt[i][0].jj;
				url.setAttribute("href", url1 + txt[i][0].zm);
			}
			return;
		}else {
			alert("出现错误" + xmlhttp.status);
		}
	}
}

// 左边列表的生成
(function() {
	var nav = document.getElementsByClassName("js-ul")[0];
	var xmlhttp;
	if (window.XMLHttpRequest) {
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET","public/api.web.php/web/list");
	xmlhttp.send();
	xmlhttp.onload=function () {
		if(xmlhttp.readyState==4 && xmlhttp.status==200) {
			var txt2 = xmlhttp.responseText;
			txt2 = JSON.parse(txt2);
			for(var i in txt2) {
				nav.innerHTML += `<li class="nav-list"><a href="javascript:;">${txt2[i][0].group_name}</a></li>`;
			}
			listsChange();
		}else {
			alert("网页出错：" + xmlhttp.status);
		}
	}
}) ();